

// import { OpenOrder } from 'src/model/Order';
import style from './TradeCard.module.scss';

type OpenOrder = {
  FID: string,
  FCNY: string,
  FGoods: string,
  FMax: number,
  FMin: number,
  FPrice: number
  FQuantity: number,
  FUserName: string,
  FWay: string,
}

type Props = {
  data: OpenOrder[];
};

const TradeCard = ({ data }: Props) => {

  const elementMapFunction = (transaction: OpenOrder) => (
    <div key={transaction.FID}>
      <div className={style.self}>
        <div className={style.head}>{transaction.FUserName}</div>
        <div className={style.item}>
          <div className={style.label}>单价</div>
          <div className={style.value}>{`${transaction.FPrice
            } ${transaction.FCNY}`}</div>
        </div>
        <div className={style.item}>
          <div className={style.label}>数量</div>
          <div className={style.value}>{`${transaction.FQuantity
            } ${transaction.FGoods}`}</div>
        </div>
        <div className={style.item}>
          <div className={style.label}>限额</div>
          <div className={style.value}>
            {`${transaction.FMin} - ${transaction.FMax} ${transaction.FCNY}`}
          </div>
        </div>
        <div className={style.bank}>银行卡</div>
      </div>
      <div className={style.divider} />
    </div>
  );

  return <div>{data.map(elementMapFunction)}</div>;
};

export default TradeCard;
